@model OrchardCore.ContentFields.Settings.ContentPickerFieldSettings
@using OrchardCore.ContentManagement;

@inject IEnumerable<IContentPickerResultProvider> ResultProviders

@{
    var resultProviderItems = ResultProviders.Select(p => new SelectListItem
    {
        Text = p.Name,
        Value = p.Name
    });
}


<script asp-name="vuejs" at="Foot"></script>

<div class="form-group">
    <div class="custom-control custom-checkbox">
        <input asp-for="Required" type="checkbox" class="custom-control-input">
        <label class="custom-control-label" asp-for="Required">@T["Required"]</label>
        <span class="hint">— @T["Whether to ensure at least one element is selected."]</span>
    </div>
</div>

<div class="form-group">
    <div class="custom-control custom-checkbox">
        <input asp-for="Multiple" type="checkbox" class="custom-control-input">
        <label class="custom-control-label" asp-for="Multiple">@T["Allow multiple"]</label>
        <span class="hint">— @T["Whether to allow multiple elements to be selected."]</span>
    </div>
</div>

<div id="contentTypesVue" class="form-group">
    <label asp-for="DisplayedContentTypes">@T["Content Types"]</label>
    <span class="hint">@T["The content types to display. Choose at least one."]</span>

    <div class="custom-control custom-checkbox">
        <input asp-for="DisplayAllContentTypes" type="checkbox" class="custom-control-input" v-model="displayAllContentTypes">
        <label class="custom-control-label" asp-for="DisplayAllContentTypes">@T["Display All Content Types"]</label>
        <span class="hint">— @T["Whether to allow picker to display all content types."]</span>
    </div>

    <div v-show="!displayAllContentTypes">
        @await Component.InvokeAsync("SelectContentTypes", new { selectedContentTypes = Model.DisplayedContentTypes, htmlName = Html.NameFor(m => m.DisplayedContentTypes) })
    </div>
</div>

<div class="form-group">
    <div class="row col-sm-6">
        <label asp-for="Hint">@T["Hint"]</label>
        <textarea asp-for="Hint" rows="2" class="form-control"></textarea>
        <span class="hint">@T["The hint text to display for this field on the editor."]</span>
    </div>
</div>

@*<div class="form-group">
        <div class="row col-sm-6">
            <label asp-for="SearchResultProvider">@T["Search Result Provider"]</label>
            <select asp-for="SearchResultProvider" asp-items="resultProviderItems" class="form-control"></select>
            <span class="hint">@T["The search result provider to use when selecting content items."]</span>
        </div>
    </div>*@

<script at="Foot" depends-on="vuejs">
    var app = new Vue({
        el: "#contentTypesVue",
        data: {
            displayAllContentTypes: @Model.DisplayAllContentTypes.ToString().ToLower()
        }
    });
</script>
